<template>

    <el-form ref="ruleFormRef" :model="ruleForm" :rules="rules" label-width="160px" class="demo-ruleForm"
             :size="formSize" status-icon>
<!--      <el-row>-->
<!--        <el-col :span="24">-->
<!--          <el-form-item label="" prop="id">-->
<!--            <el-input v-model="ruleForm.id"/>-->
<!--          </el-form-item>-->
<!--        </el-col>-->
<!--      </el-row>-->
      <el-row>
        <el-col :span="24">
          <el-form-item label="商户来源" prop="shopSource">
            <el-select v-model="ruleForm.shopSource" placeholder="请选择商户来源"  style="width:100%">
              <el-option  label="抖音" :value=0></el-option>
              <el-option  label="美团" :value=1></el-option>
              <el-option  label="系统自建" :value=2></el-option>
            </el-select>
            <div class="form-tip">商户来源：商户来源于美团、抖音还是系统自建</div>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
          <el-form-item label="门店ID" prop="poiId">
            <el-input v-model="ruleForm.poiId"/>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
          <el-form-item label="门店名称" prop="poiName">
            <el-input v-model="ruleForm.poiName"/>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
          <el-form-item label="门店地址" prop="address">
            <el-input v-model="ruleForm.address"/>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
          <el-form-item label="维度" prop="latitude">
            <el-input v-model="ruleForm.latitude"/>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
          <el-form-item label="经度" prop="longitude">
            <el-input v-model="ruleForm.longitude"/>
          </el-form-item>
        </el-col>
      </el-row>
<!--      <el-row>-->
<!--        <el-col :span="24">-->
<!--          <el-form-item label="账户信息" prop="accountId">-->
<!--            <el-input v-model="ruleForm.accountId"/>-->
<!--&lt;!&ndash;            <span class="form-tip">商户来源：商户来源于美团还是抖音</span>&ndash;&gt;-->
<!--          </el-form-item>-->
<!--        </el-col>-->
<!--      </el-row>-->
<!--      <el-row>-->
<!--        <el-col :span="24">-->
<!--          <el-form-item label="账户名称" prop="accountName">-->
<!--            <el-input v-model="ruleForm.accountName"/>-->
<!--&lt;!&ndash;            <span class="form-tip">商户来源：商户来源于美团还是抖音</span>&ndash;&gt;-->
<!--          </el-form-item>-->
<!--        </el-col>-->
<!--      </el-row>-->
<!--      <el-row>-->
<!--        <el-col :span="24">-->
<!--          <el-form-item label="状态 0-停用 1-启用 2-备用" prop="statusFlag">-->
<!--            <el-input v-model="ruleForm.statusFlag"/>-->
<!--          </el-form-item>-->
<!--        </el-col>-->
<!--      </el-row>-->
<!--      <el-row>-->
<!--        <el-col :span="24">-->
<!--          <el-form-item label="是否删除 0-否 1-是" prop="delFlag">-->
<!--            <el-input v-model="ruleForm.delFlag"/>-->
<!--          </el-form-item>-->
<!--        </el-col>-->
<!--      </el-row>-->
<!--      <el-row>-->
<!--        <el-col :span="24">-->
<!--          <el-form-item label="创建人" prop="createUser">-->
<!--            <el-input v-model="ruleForm.createUser"/>-->
<!--          </el-form-item>-->
<!--        </el-col>-->
<!--      </el-row>-->
<!--      <el-row>-->
<!--        <el-col :span="24">-->
<!--          <el-form-item label="创建时间" prop="createTime">-->
<!--            <el-input v-model="ruleForm.createTime"/>-->
<!--          </el-form-item>-->
<!--        </el-col>-->
<!--      </el-row>-->
<!--      <el-row>-->
<!--        <el-col :span="24">-->
<!--          <el-form-item label="修改时间" prop="updateTime">-->
<!--            <el-input v-model="ruleForm.updateTime"/>-->
<!--          </el-form-item>-->
<!--        </el-col>-->
<!--      </el-row>-->
      <el-row>
        <el-col :span="24">
          <el-form-item label="备注" prop="remark">
            <el-input type="textarea" v-model="ruleForm.remark"/>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
          <el-button type="primary" @click="submitForm(ruleFormRef)">保存</el-button>
        </el-col>
      </el-row>
    </el-form>
<!--    <template #footer>-->
<!--         <span class="dialog-footer">-->
<!--           <el-button @click="closeEditDialog">关闭</el-button>-->
<!--           <el-button type="primary" @click="submitForm(ruleFormRef)">提交</el-button>-->
<!--         </span>-->
<!--    </template>-->
</template>

<script lang="ts" setup>
import {onMounted, reactive, ref} from 'vue'
import type {FormInstance, FormRules} from 'element-plus'
import {ElMessage} from "element-plus";
import router from "@/router";
import {RetailShop} from '@/apis/model/shop/RetailShopModel';
import {
  getShopByOwnerId,
  insertOrUpdateRetailShop,
  insertRetailShop,
  updateRetailShop
} from '@/apis/http/shop/RetailShopHttp';

import {userStore} from "@/store";

const store = userStore();
const userInfo = store.userInfo;


// 刷新list页面
const refushList = ref(false);

const ruleForm = ref({} as RetailShop)

const formSize = ref('default')
const ruleFormRef = ref<FormInstance>()

const rules = reactive<FormRules>({
  id: [
    {required: true, message: '请输入', trigger: 'blur'}
  ],
  shopSource: [
    {required: true, message: '请输入商户来源', trigger: 'blur'}
  ],
  poiId: [
    {required: true, message: '请输入门店ID', trigger: 'blur'}
  ],
  poiName: [
    {required: true, message: '请输入门店名称', trigger: 'blur'}
  ],
  address: [
    {required: true, message: '请输入门店地址', trigger: 'blur'}
  ],
  latitude: [
    {required: true, message: '请输入维度', trigger: 'blur'}
  ],
  longitude: [
    {required: true, message: '请输入经度', trigger: 'blur'}
  ],
  accountId: [
    {required: true, message: '请输入账户信息', trigger: 'blur'}
  ],
  accountName: [
    {required: true, message: '请输入账户名称', trigger: 'blur'}
  ],
  statusFlag: [
    {required: true, message: '请输入状态 0-停用 1-启用 2-备用', trigger: 'blur'}
  ],
  delFlag: [
    {required: true, message: '请输入是否删除 0-否 1-是', trigger: 'blur'}
  ],
  createUser: [
    {required: true, message: '请输入创建人', trigger: 'blur'}
  ],
  createTime: [
    {required: true, message: '请输入创建时间', trigger: 'blur'}
  ],
  updateTime: [
    {required: true, message: '请输入修改时间', trigger: 'blur'}
  ],
  remark: [
    {required: true, message: '请输入备注', trigger: 'blur'}
  ],
})

const submitForm = async (formEl: FormInstance | undefined) => {
  if (!formEl) return
  await formEl.validate((valid, fields) => {
    if (valid) {
      // 新增
        insertOrUpdateRetailShop(ruleForm.value).then(res => {
          const code = res.code;
          const message: string = res.message;
          const data = res.data;
          if (code == 200) {
            ElMessage({
              message: '创建成功！',
              type: 'success',
            })
            refushList.value = true

          } else {
            ElMessage.error('创建失败！')
          }
        })
      } else {
      ElMessage.error('请完善信息！')
    }
  })
}

onMounted(()=>{
  var ownerId =  userInfo.id;
  getShopByOwnerId(ownerId).then(res => {
    ruleForm.value = res.data;
    ruleForm.value.ownerId = ownerId;
  })
})


</script>

<style scoped>
.dialog-footer button:first-child {
  margin-right: 10px;
}

.form-tip {
  color: gray;
}
</style>
